<!DOCTYPE html>
<html ng-app="skillCalc">
<base href="/skillcalculator/">

<head lang="en">
    <meta charset="UTF-8">
    <title>Borderlands The Pre Sequel Skill-Calculator</title>

    <link rel="stylesheet" type="text/css" href="css/calc.css">
    <link rel="stylesheet" type="text/css" href="libs/bootstrap/css/bootstrap.min.css">

    <script type="text/javascript" src="libs/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="libs/angular.min.js"></script>
    <script type="text/javascript" src="libs/angular-route.js"></script>

    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/calc.js"></script>
    <script type="text/javascript" src="libs/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="wrapper-main" ng-controller="MyController as my">
        <div class="header">
            <div class="content">
                header
            </div>
        </div>
        <div class="skill-container">
            <div class="skilltree-list" >
                <div class="tree-wrapper" >

                </div>
            </div>
        </div>
        <div class="stats-container" >
            URL : <input type="text" ng-change="change()" ng-model="site.urlhash"><br>
            URL : {{site.urlhash}}

            <br>
            stats-list
            <button ng-click="calc('wilhelm')">test</button>
        </div>
        <div class="stats-summary">
            stats-summary
            <div ng-repeat="char in chars">
                <span class="head"><b>Character</b></span>
                <span><b>Name:</b> {{char.name}}</span>
                <span><b>Class:</b> {{char.class}}</span>

                <div>
                    <span class="head">Action Skill</span>
                    <span><b>Name:</b> {{char.actionskill.name}}</span>
                    <span><b>Description:</b> {{char.actionskill.description}}</span>
                    <span><b>Duration:</b> {{char.actionskill.duration}} seconds</span>
                    <span><b>Cooldown:</b> {{char.actionskill.cooldown}} seconds</span>

                    <div>
                        <span class="shead">Action Skill Effects</span>
                        <span ng-hide="char.actionskill.actionEffects">None</span>
                        <div ng-show="char.actionskill.actionEffects" ng-repeat="aeffect in char.actionskill.actionEffects">
                            <span class="ehead"><b>Stat:</b> {{aeffect.stat}}</span>
                            <span><b>Value:</b> {{aeffect.value | valueRequired}}</span>
                            <span><b>Unit:</b> {{aeffect.unit | valueRequired}}</span>
                            <span><b>Target:</b> {{aeffect.target | valueRequired}}</span>
                            <span><b>Category:</b> {{aeffect.category}}</span>
                        </div>
                    </div>

                </div>

                <div ng-repeat="trees in char.skilltrees">
                    <span class="head">Skilltrees</span>
                    <span><b>Name:</b> {{trees.name}}</span>
                    <span><b>Position:</b> {{trees.pos}}</span>

                    <div>
                        <span class="head">Skills</span>
                        <div ng-repeat="(key, skill) in trees.skills">
                            <span class="shead">{{key}}</span>
                            <span><b>Description:</b> {{skill.description}}</span>
                            <span><b>Condition:</b> {{skill.condition | valueRequired }}</span>
                            <span><b>Duration:</b> {{skill.duration | valueRequired}}</span>
                            <span><b>Levels:</b> {{skill.levels}}</span>
                            <span><b>Weighting Per Level:</b> {{skill.weightingPerLevel}}</span>
                            <span><b>Tier:</b> {{skill.tier}}</span>
                            <span><b>Position:</b> {{skill.pos}}</span>

                            <div ng-hide="skill.effects.length">
                                <span class="head">Effects</span>
                                <div ng-repeat="effect in skill.effects">
                                    <span class="ehead">Stat: {{effect.stat}}</span>
                                    <span><b>Category:</b> {{effect.category}}</span>
                                    <span><b>Target:</b> {{effect.target}}</span>
                                    <span><b>BaseValue:</b> {{effect.valueBase}}</span>
                                    <span><b>ValuePerLevel:</b> {{effect.valuePerLevel}}</span>
                                    <span><b>Value Unit:</b> {{effect.valueUnit}}</span>
                                    <span><b>Cooldown:</b> {{effect.cooldown | valueRequired}}</span>
                                    <span><b>isActionPackage:</b> {{effect.isActionPackage}}</span>
                                    <span><b>Maximum Stacks:</b> {{effect.maxStacks}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="content">
                footer
            </div>
        </div>
    </div>
</body>

</html>